<template>
  <transition name="el-zoom-in-center">
    <div class="JNPF-common-layout">
      <div class="JNPF-preview-main">
        <el-page-header @back="goBack" content="账单管理" style="font-weight: 800"/>

        <el-row :gutter="10" class=" main" :style="{margin: '0 auto',width: '100%'}">
          <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="180px"
                   label-position="right">
            <template v-if="!loading">
              <el-col :span="24">
                <el-row :gutter="10">
                  <el-col :span="24" style="display: flex">
                    <div style="display: flex;right: 0px;position: absolute">
                      <jnpf-button
                        style="width: 100px"
                        align="right" buttonText="缴费通知" type="primary" :closable="false"
                      >
                      </jnpf-button>
                      <jnpf-button style="width: 100px" @click="billCollection()"
                                   align="right" buttonText="账单收款" type="primary" :closable="false"
                      >
                      </jnpf-button>
                      <!--                   <jnpf-button style="width: 100px"   @click="billReduce()"-->
                      <!--                                align="right" buttonText="账单减免" type="primary" :closable="false"-->
                      <!--                   >-->
                      <!--                   </jnpf-button>-->
                      <jnpf-button style="width: 100px" @click="toBllReduce()"
                                   align="right" buttonText="账单减免" type="primary" :closable="false"
                      >
                      </jnpf-button>
                      <jnpf-button style="width: 100px" @click="toBillRefund()"
                                   align="right" buttonText="退款申请" type="primary" :closable="false"
                      >
                      </jnpf-button>
<!--                      <jnpf-button style="width: 100px" @click="toTicket()"-->
<!--                                   align="right" buttonText="开票申请" type="primary" :closable="false"-->
<!--                      >-->
<!--                      </jnpf-button>-->
                    </div>
                  </el-col>
                </el-row>
              </el-col>
              <el-card>
                <el-col :span="24" style="margin-top: 20px">

                  <el-form-item label-width="100">
                    <groupTitle style="margin-left: 21px"
                                content-position="left" :closable="false" content="基础信息"
                    >
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-row :gutter="10" style="margin-left: 21px">
<!--                    <el-col :span="6">-->
<!--                      <el-form-item label="项目:" label-width="100">-->
<!--                        <p>{{ dataForm.project }}</p>-->
<!--                      </el-form-item>-->
<!--                    </el-col>-->
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="客户名称:" label-width="100">
                          <p>{{ dataForm.customerName }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="应收编号:" label-width="100">
                          <p>{{ dataForm.billNo }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="应收类型:" label-width="100">
                          <p>{{ dataForm.billNo }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="收款状态:" label-width="100">
                          <p v-if=" !dataForm.status" style="color: red">未收款</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="合同编号:" label-width="100">
                          <p style="color: blue">{{ dataForm.contractNo }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="计费周期:" label-width="100">
                          <p>{{ dataForm.expenseCycleDate }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="应收日期:" label-width="100">
                          <p>{{ dataForm.planReceiptDate }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="逾期状态:" label-width="100">
                          <p v-if="dataForm.isOverdue == 0">否</p>
                          <p v-if="dataForm.isOverdue == 1" style="color: red">是</p>


                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item label-width="100">
                        <el-form-item label="备注:" label-width="100">
                          <p>{{ dataForm.billRemark }}</p>
                        </el-form-item>
                      </el-form-item>
                    </el-col>
                    <!--                <el-col :span="6">-->
                    <!--                  <el-form-item label-width="100">-->
                    <!--                    <JNPF-Text :style='{"width":"100%"}'-->
                    <!--                               :textStyle='{"color":"#000000","font-weight":"normal","text-decoration":"none","font-size":12,"line-height":32,"font-style":"normal","text-align":"left"}'-->
                    <!--                               value="备注" :closable="false"-->
                    <!--                    >-->
                    <!--                    </JNPF-Text>-->
                    <!--                  </el-form-item>-->
                    <!--                </el-col>-->
                  </el-row>
                </el-col>
              </el-card>
              <el-col :span="24">
                <el-form-item label-width="100">
                  <groupTitle style="margin-left: 21px"
                              content-position="left" :closable="false" content="费用项目明细"
                  >
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="100" style="margin-left: 21px">
                  <!--                <div class="JNPF-common-title">-->
                  <!--                  <h2 style="font-weight: 600">费用项目明细</h2>-->
                  <!--                </div>-->
                  <el-table border :data="dataForm.zcbillitemList" size="mini">
                    <el-table-column type="index" width="150" label="序号" align="center"/>
                    <el-table-column width="150" label="状态" align="status">
                      <template slot-scope="scope">
                        <p style="color:red" v-if="scope.row.status">待收款</p>
                      </template>
                    </el-table-column>


                    <el-table-column width="350" prop="expenseItem" label="费用项">
                      <template slot-scope="scope">

                        <p>{{ scope.row.expenseItem }}</p>

                      </template>
                    </el-table-column>
                    <el-table-column prop="expenseItem" width="450" label="本金">
                      <template slot-scope="scope">
                        <!--                      <el-input disabled v-model="scope.row.principal"-->
                        <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                        <!--                      >-->
                        <!--                      </el-input>-->
                        <div style="text-align: left" v-html="scope.row.principal"></div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="expenseItem" width="450" label="滞纳金明细">
                      <template slot-scope="scope">
                        <!--                      <el-input disabled v-model="scope.row.principal"-->
                        <!--                                placeholder="请输入" readonly clearable :style='{"width":"100%"}'-->
                        <!--                      >-->
                        <!--                      </el-input>-->

                        <div style="text-align: left" v-html="scope.row.lateFee"></div>
                      </template>
                    </el-table-column>

                    <!--                  <el-table-column label="操作" width="180">-->
                    <!--                    <template slot-scope="scope">-->
                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="delzcbillitemList(scope.$index)"-->
                    <!--                      >结转-->
                    <!--                      </el-button>-->

                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="delzcbillitemList(scope.$index)"-->
                    <!--                      >减免-->
                    <!--                      </el-button>-->

                    <!--&lt;!&ndash;                      <el-button size="mini" type="text" class="JNPF-table-delBtn"&ndash;&gt;-->
                    <!--                      <el-button size="mini" type="text" class="JNPF-table"-->
                    <!--                                 @click="delzcbillitemList(scope.$index)"-->
                    <!--                      >拆费-->
                    <!--                      </el-button>-->
                    <!--                    </template>-->
                    <!--                  </el-table-column>-->
                  </el-table>

                  <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                                ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
                  />
                </el-form-item>
              </el-col>

              <!---->

              <el-col :span="24">
                <el-form-item label-width="100">
                  <groupTitle style="margin-left: 21px"
                              content-position="left" :closable="false" content="收支明细"
                  >
                  </groupTitle>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label-width="0">
                  <div class="JNPF-common-title">
                    <h2></h2>
                  </div>

                  <el-table style="margin-left: 21px" border :data="dataForm.zcglcwszitemList" size="mini">
                    <el-table-column type="index" width="50" label="序号" align="center"/>
                    <el-table-column prop="expenseItem" label="费用项">
                      <template slot-scope="scope">
                        <p>{{ scope.row.expenseItem }}</p>
                      </template>
                    </el-table-column>


                    <el-table-column prop="receiveAmount" label="状态">
                      <template slot-scope="scope">
                        <p v-if="scope.row.status == '1'">正常</p>
                        <p v-if="scope.row.status == '2'" style="color:red;">已作废</p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="receiveAmount" label="应收金额">
                      <template slot-scope="scope">
                        <p>{{ scope.row.receiveAmount }}</p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="receivedAmount" label="已收金额">
                      <template slot-scope="scope">
                        <p>{{ scope.row.receivedAmount }}</p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="unpaidAmount" label="未收金额">
                      <template slot-scope="scope">
                        <p>{{ scope.row.unpaidAmount }}</p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="transactionAmount" label="本次交易金额">
                      <template slot-scope="scope">
                        <p>{{ scope.row.transactionAmount }}</p>
                      </template>
                    </el-table-column>
                    <el-table-column prop="creatortime" label="创建时间">
                      <template slot-scope="scope">
                        <p>{{ scope.row.creatortime }}</p>
                      </template>
                    </el-table-column>


                    <el-table-column prop="billNo" label="票据号">
                      <template slot-scope="scope">
                        <p>{{ scope.row.billNo }}</p>
                      </template>
                    </el-table-column>

                  </el-table>
                </el-form-item>
              </el-col>


            </template>
          </el-form>
        </el-row>


        <FlowBox v-if="flowVisible" ref="FlowBox" @close="colseFlow"/>


        <JNPF-Form v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>
        <BillReduce v-if="formVisible" ref="JNPFFormBillReduce" @refresh="refresh"/>
        <BillRefund v-if="formVisibleRefund" ref="JNPFFormBillRefund" @refresh="refresh"/>
        <!--      <BillCollection v-if="formVisibleBill" ref="JNPFFormBill" @refresh="refresh"/>-->
      </div>
    </div>
  </transition>
</template>
<style scoped>
#app {
  font-family: Noto Sans SC;
  font-style: normal;
  font-weight: 400;
  color: black;
}

/* 增加表格行高 */
/deep/ .el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
  font-family: Noto Sans SC;
  font-style: normal;
  font-weight: 400;
  /*color: black;*/
}

/* 如果你还想要调整单元格内部的垂直居中 */
/deep/ .el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 8px !important;
}

/*.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{*/

/*  margin-bottom: 2px!important;*/
/*}*/

/*!* 重置默认样式 *!*/
/** {*/
/*  margin: 0;*/
/*  padding: 0;*/
/*  box-sizing: border-box;*/
/*}*/

/*html, body {*/
/*  font-family: Arial, sans-serif;*/
/*  font-size: 16px;*/
/*  line-height: 1.5;*/
/*  color: #333;*/
/*  background-color: #fff;*/
/*}*/

/*!* 清除列表默认样式 *!*/
/*ul, ol {*/
/*  list-style: none;*/
/*}*/

/*!* 清除链接默认样式 *!*/
/*a {*/
/*  text-decoration: none;*/
/*  color: inherit;*/
/*}*/

/*!* 清除浮动 *!*/
/*.clearfix::after {*/
/*  content: "";*/
/*  display: table;*/
/*  clear: both;*/
/*}*/

/*!* 隐藏元素 *!*/
/*.hidden {*/
/*  display: none !important;*/
/*}*/

/*!* 其他常用样式 *!*/
/*.container {*/
/*  background-color: white;*/
/*  width: 95%;*/
/*  max-width: 1200px;*/
/*  margin: 0 auto;*/
/*  padding: 0 20px; !* 添加左右边距 *!*/
/*}*/

/*.text-center {*/
/*  text-align: center;*/
/*}*/

/*.text-left {*/
/*  text-align: left;*/
/*}*/

/*.text-right {*/
/*  text-align: right;*/
/*}*/

/*.bold {*/
/*  font-weight: bold;*/
/*}*/

/*.italic {*/
/*  font-style: italic;*/
/*}*/

/* 响应式布局 */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 10px; /* 调整左右边距 */
  }
}
</style>
<script>
import FlowBox from '@/views/workFlow/components/FlowBox'
import JNPFForm from './Form'
import request from '@/utils/request'
import PrintBrowse from '@/components/PrintBrowse'
import jnpf from '@/utils/jnpf'
import BillReduce from '@/views/zcgl/zcglcwbill/BillReduce'
import BillCollection from '@/views/zcgl/zcglcwbill/BillCollection'
import BillRefund from '@/views/zcgl/zcglcwbill/BillRefund'

export default {
  components: {BillRefund, BillCollection, PrintBrowse, BillReduce, JNPFForm, FlowBox},
  // props: [],
  data() {
    return {
      flowVisible: false,

      formVisibleRefund: false,
      formVisibleBill: false,
      formVisible: false,
      id: '',
      visible: false,
      loading: false,
      printBrowseVisible: false,
      printId: '',
      dataForm: {
        id: '',
        paymentType: '',
        paymentBillNo: '',
        receiptAccount: '',
        paymentBy: '',
        paymentAccount: '',
        receiptDate: '',
        paymentCertificateFile: [],
        zcglcwbillitemList: []
      },
      paymentTypeOptions: [{'fullName': '选项一', 'id': '1'}, {'fullName': '选项二', 'id': '2'}],
      receiptAccountOptions: [{'fullName': '选项一', 'id': '1'}, {'fullName': '选项二', 'id': '2'}],
      paymentByOptions: [{'fullName': '选项一', 'id': '1'}, {'fullName': '选项二', 'id': '2'}],
      paymentAccountOptions: [{'fullName': '选项一', 'id': '1'}, {'fullName': '选项二', 'id': '2'}]

    }
  },
  computed: {},
  watch: {},
  // created() {
  //   this.id = this.$route.query.id
  //   if(this.id){
  //     this.init(this.id)
  //
  //   }
  //
  // },
  mounted() {
  },
  methods: {
    billReduce() {
      this.formVisible = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBillReduce.init(this.dataForm.id, null)
      })


    },

    colseFlow(isrRefresh) {
      this.flowVisible = false
      if (isrRefresh) this.reset()
    },
    goBack(isRefresh) {
      this.$emit('close', isRefresh)
      // this.$router.push(`/zcgl/zcglcwbill/index?id=${this.id}`)
    },
    refresh() {
      this.init(this.id)
    },
    toTicket(id, flowState) {
      let data = {
        id: this.id || '',
        enCode: 'kpsq',
        flowId: '621351715181957957',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
      // this.$router.push(`/zcgl/zcglcwbill/openTicket?id=${this.id}`)
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      //         _dataAll.paymentType = _dataAll.paymentType ? JSON.parse( _dataAll.paymentType):[]
      //         _dataAll.receiptAccount = _dataAll.receiptAccount ? JSON.parse( _dataAll.receiptAccount):[]
      //         _dataAll.paymentBy = _dataAll.paymentBy ? JSON.parse( _dataAll.paymentBy):[]
      //         _dataAll.paymentAccount = _dataAll.paymentAccount ? JSON.parse( _dataAll.paymentAccount):[]
      _dataAll.paymentCertificateFile = _dataAll.paymentCertificateFile ? JSON.parse(_dataAll.paymentCertificateFile) : []
      for (let i = 0; i < _dataAll.zcbillitemList.length; i++) {
        var _list = _dataAll.zcbillitemList[i]
      }
      this.dataForm = _dataAll
    },
    billCollection() {


      this.formVisibleBill = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBill.init(this.dataForm.id, null)
      })

    },

    billRefund() {

      this.formVisibleRefund = true
      this.$nextTick(() => {
        this.$refs.JNPFFormBillRefund.init(this.dataForm.id, null)
      })


    },

    toBillRefund(id, flowState) {
      let data = {
        create: true,
        id: this.id || '',
        enCode: 'tklc',
        flowId: '621706419615307973',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
    },
    toBllReduce(id, flowState) {
      let data = {
        create: true,
        id: this.id || '',
        enCode: 'jmcl',
        flowId: '621313921785008965',
        formType: 1,
        opType: flowState ? 0 : '-1',
        status: flowState
      }
      this.flowVisible = true
      this.$nextTick(() => {

        this.$refs.FlowBox.init(data)
      })
    },

    init(id) {

      this.id = id
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // this.loading = true
          request({
            url: '/api/zcgl/fico/bill/getBillInfo/' + this.dataForm.id,
            method: 'get'
          }).then(res => {

            this.dataInfo(res.data)
            this.loading = false
            this.getSzDetail()
          })
        }

      })
    },
    getSzDetail() {

      this.dataForm.id = this.id || 0
      this.visible = true
      this.$nextTick(() => {
        if (this.dataForm.id) {
          // this.loading = true
          request({
            url: '/api/example/ZcglCwSz/detailByBillId/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfoSZ(res.data)
            this.loading = false
          })
        }

      })

    },
    formatCurrency(value) {
      return new Intl.NumberFormat('zh-CN', {
        style: 'currency',
        currency: 'CNY'
      }).format(value);
    },
    dataInfoSZ(dataAll) {
      this.dataForm.zcglcwszitemList = []
      for (let j = 0; j < dataAll.length; j++) {

        var item = dataAll[j];

        let _dataAll = item
        item.zcglcwszitemList.forEach(o => {
          this.dataForm.zcglcwszitemList.push(o)

        })
      }
      this.dataForm.zcglcwszitemList.forEach(i => {
        i.transactionAmount = this.formatCurrency(i.transactionAmount)
        i.unpaidAmount = this.formatCurrency(i.unpaidAmount)
        i.receivedAmount = this.formatCurrency(i.receivedAmount)
        i.receiveAmount = this.formatCurrency(i.receiveAmount)
      })


      this.$forceUpdate()


    },


  }
}

</script>
<style>

/* 增加表格行高 */
/deep/ .el-table .el-table__row {
  height: 60px; /* 你想要的行高 */
  border: 1px slategrey solid;
}

/* 如果你还想要调整单元格内部的垂直居中 */
/deep/ .el-table .cell {
  height: 60px; /* 和行高一致 */
  line-height: 60px; /* 垂直居中文本 */

}

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {

  margin-bottom: 8px !important;
}

</style>
